<template>
  <div class="mainAudio_content">
    <div class="loading">
      <div class="loading_text ellipsis">{{ currMessage }}</div>
      <el-progress class="loading_progress" v-if="currMessage" :text-inside="true" :percentage="percentage"
        :show-text="false" :stroke-width="10"></el-progress>
    </div>
    <div class="mainAudioListAndDetail flex-1 win-flex-row">
      <div class="mainAudio_list">
        <div class="mainAudioItem" :class="clickItemIndex == index ? 'active' : ''"
          @click="mainAudioItemClick(item, index)" :key="'mainAudioItem_' + index"
          v-for="(item, index) in mainAudioFileList">
          {{ item.name }}</div>
      </div>
      <div class="play_content">
        <template v-if="playContent">
          <div class="container">
            <div class="content" v-html="playContent"></div>
            <div class="oper">
              <el-button type="primary" @click="updatePlayContent">修改</el-button>
            </div>
          </div>
        </template>
        <el-form class="setting pt10" label-width="120px" size="mini">
          <!-- <el-form-item label="播放类型:">
            <el-radio-group v-model="audioSetting.play.type" :disabled="!canUpdate">
              <el-radio :label="0">结尾播放</el-radio>
              <el-radio :label="1">叠音播放</el-radio>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item label="智能润色主音频:">
            <el-switch v-model="mainAudioSetting.smartReply.open" />
          </el-form-item>
          <el-form-item label="间隔区间(ms):">
            <div class="win-flex-row flex-y-center flex-1">
              <el-input-number v-model="mainAudioSetting.intervalMin" controls-position="right" :min="0"
                :max="100000"></el-input-number>
              <div class="mr5 ml5">到</div>
              <el-input-number v-model="mainAudioSetting.intervalMax" controls-position="right" :min="0"
                :max="100000"></el-input-number>
            </div>
          </el-form-item>

        </el-form>
      </div>
    </div>
    <el-dialog title="修改主音频文件" :visible.sync="updateMainFileOpen" width="800px" append-to-body
      :close-on-click-modal="false">
      <el-input type="textarea" v-model="selectMainContent" :autosize="{ minRows: 4, maxRows: 10 }"
        placeholder="请输入主文件内容">
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateMainFileOpen = false" size="small">取 消</el-button>
        <el-button type="primary" size="small" @click="saveUpdateMainFile">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { EventBus } from '@/event-bus.js';
import { replaceBr } from '@/utils/util';
import { saveEntity } from '@/api/script/item';
export default {
  name: 'MainAudioList',
  data() {
    return {
      currMessage: '',
      clickItemIndex: 0,
      liveStatus: 0,
      startAudioDuration: 0,
      audioDuration: 0,
      modelTypes: [],
      playContent: '',
      selectMainContent: '',
      selectMainId: '',
      updateMainFileOpen: false
    };
  },
  created() {
    // this.test();
    EventBus.$on("changeLiveStatus", (status) => {
      //开启了直播
      this.liveStatus = status;
    });
    EventBus.$on("mainAudioPlayFileEvent", (result) => {
      const id = result.playScriptId;
      this.currMessage = result.message;
      this.audioDuration = result.audioDuration;
      this.startAudioDuration = 0;
      if (this.intervalForPorgess) {
        clearInterval(this.intervalForPorgess);
      }
      this.intervalForPorgess = setInterval(() => {
        this.startAudioDuration += 0.1;
      }, 100);
      //找到这个文件 然后改变样式
      let resultIndex = this.mainAudioFileList.findIndex(item => item.id == id);
      if (resultIndex != -1) {
        this.clickItemIndex = resultIndex;
        this.mainAudioItemClick(this.mainAudioFileList[resultIndex], resultIndex);
      }
    });
  },
  beforeDestroy() {
    EventBus.$off('changeLiveStatus');
    EventBus.$off('mainAudioPlayFileEvent');
  },
  mounted() {

  },
  watch: {
    mainAudioFileList() {
      if (this.mainAudioFileList.length > 0) {
        this.mainAudioItemClick(this.mainAudioFileList[0], 0);
      }
    }
  },
  computed: {
    percentage() {
      if (this.audioDuration == 0) {
        return 0;
      }
      return Number((Number(this.startAudioDuration) / Number(this.audioDuration)).toFixed(2) * 100);
    },
    canUpdate() {
      return this.liveStatus === 0;
    },
    audioSetting() {
      return this.pageConfig.audioSetting;
    },
    mainAudioSetting() {
      return this.pageConfig.mainAudioSetting;
    },
    mainAudioFileList() {
      return this.$store.state.page.mainAudioFileList;
    },
    pageConfig() {
      return this.$store.state.page.config;
    },
  },
  methods: {
    test() {
      this.currMessage = "123";
      this.audioDuration = 5;
      this.startAudioDuration = 1;
      if (this.intervalForPorgess) {
        clearInterval(this.intervalForPorgess);
      }
      this.intervalForPorgess = setInterval(() => {
        console.info(this.startAudioDuration)
        this.startAudioDuration++;
      }, 1000);
      setTimeout(() => {
        this.test();
      }, 5000);
    },
    saveUpdateMainFile() {
      if (!this.selectMainContent) {
        this.$modal.msgError('请输入主文件内容');
        return;
      }
      saveEntity({
        id: this.selectMainId,
        scriptContent: this.selectMainContent
      }).then(res => {
        this.$modal.msgSuccess('操作成功');
        this.$set(this.mainAudioFileList[this.clickItemIndex], 'content', this.selectMainContent);
        this.updateMainFileOpen = false;
        this.playContent = replaceBr(this.selectMainContent);
      });
    },
    updatePlayContent() {
      let item = this.mainAudioFileList[this.clickItemIndex];
      if (item) {
        if (item.itemFileType != 'txt') {
          this.$modal.msgError('不是文件类型不允许修改内容');
          return;
        }
        this.updateMainFileOpen = true;
        this.selectMainId = item.id;
        this.selectMainContent = item.content;
      }
    },
    mainAudioItemClick(item, index) {
      this.clickItemIndex = index;
      this.playContent = replaceBr(item.content);
    }
  }
};
</script>

<style lang="scss" scoped>
.mainAudio_content {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;

  .loading {
    border-bottom: 1px solid var(--color-border-first);
    padding: 5px;

    .loading_text {
      max-width: 650px;
    }
  }

  .mainAudioListAndDetail {
    height: calc(100% - 42px);
  }

  .play_content {
    display: flex;
    flex-direction: column;
    flex: 1;

    .container {
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid var(--color-border-first);
      flex: 1;
    }

    .content {
      padding: 0px 10px;
      flex: 1;
      max-height: 240px;
      overflow-y: scroll;
      word-break: break-all;
    }

    .oper {
      border-top: 1px solid var(--color-border-first);
      height: 40px;
      padding: 0px 10px;
      display: flex;
      justify-content: right;
      align-items: center;
    }

    .setting {
      padding: 0px 10px;
      padding-left: 0px;
      height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

  }

  .mainAudio_list {
    width: 200px;
    overflow-y: scroll;
    border-right: 1px solid var(--color-border-first);

    &::-webkit-scrollbar {
      width: 0 !important;
      height: 4px;
    }

    .mainAudioItem {
      font-size: 16px;
      height: 30px;
      line-height: 30px;
      cursor: pointer;
      padding-left: 5px;

      &.active {
        background: #e8f4ff;
      }

      &:hover,
      &.active {
        background: #e8f4ff;
      }
    }

  }
}
</style>
